<template>
  <div class="box">
    <el-form :model="ruleForm" label-width="100px">
      <!-- 歌手名 -->
      <el-form-item label="歌手名" prop="singerName"
        ><div class="p">
          {{ ruleForm.singerName ? ruleForm.singerName : "暂时为空" }}
        </div>
      </el-form-item>
      <!-- 艺名 -->
      <el-form-item label="艺名">
        <div class="p">
          {{ ruleForm.stageName ? ruleForm.stageName : "暂时为空" }}
        </div></el-form-item
      >
      <!-- 图片 -->
      <el-form-item label="图片">
        <template>
          <el-col :span="12">
            <div
              class="p"
              v-if="ruleForm.singerUrl == '' || ruleForm.singerUrl == null"
            >
              暂时为空
            </div>
            <img v-else :src="ruleForm.singerUrl" />
          </el-col>
        </template>
      </el-form-item>
      <!-- 性别 -->
      <el-form-item label="性别"
        ><div class="p">{{ ruleForm.sex1 ? ruleForm.sex1 : "暂时为空" }}</div>
      </el-form-item>
      <!-- 歌手生日 -->
      <el-form-item label="歌手生日">
        <div class="p">
          {{ ruleForm.birthday ? ruleForm.birthday : "暂时为空" }}
        </div></el-form-item
      >
      <!-- 大学 -->
      <el-form-item label="大学"
        ><div class="p">
          {{ ruleForm.university ? ruleForm.university : "暂时为空" }}
        </div>
      </el-form-item>
      <!-- 国籍 -->
      <el-form-item label="国籍"
        ><div class="p">
          {{ ruleForm.nationality ? ruleForm.nationality : "暂时为空" }}
        </div>
      </el-form-item>
      <!-- 地区 -->
      <el-form-item label="地区">
        <div class="p">
          {{ ruleForm.address ? ruleForm.address : "暂时为空" }}
        </div>
      </el-form-item>
      <!-- 简介 -->
      <el-form-item label="简介" prop="singerIntroduction">
        <div class="p">
          {{
            ruleForm.singerIntroduction
              ? ruleForm.singerIntroduction
              : "暂时为空"
          }}
        </div>
      </el-form-item>
      <el-button type="primary" @click="returns">返回</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        singerName: "",
        stageName: "",
        singerUrl: "",
        sex1: "",
        birthday: "",
        university: "",
        nationality: "",
        address: "",
        singerIntroduction: "",
      },
      alter: "",
    };
  },
  mounted() {
    var FormData = JSON.parse(sessionStorage.getItem("FormData"));
    for (const key in FormData) {
      this.ruleForm[key] = FormData[key];
    }
    if (FormData.birthday != "" && FormData.birthday != null) {
      this.ruleForm.birthday = FormData.birthday.split(" ")[0];
    }
    console.dir(this.ruleForm.singerUrl == "");
  },
  methods: {
    // 返回
    returns() {
      this.$router.push("/singerList");
    },
  },
};
</script>
<style scoped>
.box {
  width: 500px;
  margin: 20px auto 0;
}
img {
  width: 50px;
  height: 50px;
}
.p {
  text-align: left;
  background-color: #fff;
  padding-left: 10px;
}
</style>